import { makeStyles, Theme } from '@material-ui/core/styles';

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    position: 'relative',
    display: 'inline-block',
    userSelect: 'none',
    paddingRight: theme.spacing(2),
    paddingLeft: theme.spacing(1),
    color: theme.palette.text.primary
  },
  blue: {
    fontWeight: 700,
    color: '#5973ff'
  }
}));

export default function ({ title }) {
  const classes = useStyles();
  return <span className={classes.root + ' logo'}>
    <span className={classes.blue + ' left'}>&lt;&nbsp;</span>
    {title}
    <span className={classes.blue + ' right'}>&nbsp;&gt;</span>
  </span>
}